<template>
  <div>
    <!-- 最上面 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>商品管理</el-breadcrumb-item>
      <el-breadcrumb-item>参数列表</el-breadcrumb-item>
    </el-breadcrumb>

    <!-- 卡片视图区域 -->
    <el-card>
      <!-- 警告区域 -->
      <el-alert
        type="warning"
        title="注意:只允许未第三级分类设置相关参数"
        show-icon
        :closable="false"
      ></el-alert>

      <!-- 选择商品分类区域 -->
      <el-row class="cat_opl">
        <el-col>
          <span class="cat_span">选择商品分类</span>
          <!-- 选择商品分类的级联选择框 -->
          <el-cascader
            expand-trigger="hover"
            v-model="selectedCateKeys"
            :options="cateList"
            :props="cateProps"
            @change="handleChange"
          >
          </el-cascader>
        </el-col>
      </el-row>

      <!-- Tabs标签页区域 -->
      <el-tabs v-model="activeName" @tab-click="handleClick">
        <!-- 添加动态参数的面板 -->
        <el-tab-pane label="动态参数" name="many">
          <!-- 添加参数的按钮 -->
          <el-button
            type="primary"
            size="mini"
            :disabled="setdisabled"
            @click="setActiveDialogVisible"
            >添加参数</el-button
          >
          <!-- 动态参数的表格 -->
          <el-table :data="manyTableData" border stripe>
            <!-- 展开行 -->
            <el-table-column type="expand"> </el-table-column>
            <!-- 索引列 -->
            <el-table-column type="index"></el-table-column>
            <el-table-column
              label="参数名称"
              prop="attr_name"
            ></el-table-column>
            <el-table-column label="操作">
              <template>
                <el-button type="primary" icon="el-icon-edit">编辑</el-button>
                <el-button type="danger" icon="el-icon-search">搜索</el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-tab-pane>

        <!-- 添加静态属性的面板 -->
        <el-tab-pane label="静态属性" name="only">
          <!-- 添加属性的按钮 -->
          <el-button
            type="primary"
            size="mini"
            :disabled="setdisabled"
            @click="addStaticProps"
            >添加属性</el-button
          >
          <!-- 静态属性的表格 -->
          <el-table :data="someTableData" border stripe>
            <!-- 展开行 -->
            <el-table-column type="expand"> </el-table-column>
            <!-- 索引列 -->
            <el-table-column type="index"></el-table-column>
            <el-table-column
              label="属性名称"
              prop="attr_name"
            ></el-table-column>
            <el-table-column label="操作">
              <template>
                <el-button type="primary" icon="el-icon-edit">编辑</el-button>
                <el-button type="danger" icon="el-icon-search">搜索</el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-tab-pane>
      </el-tabs>
    </el-card>

    <!-- 添加动态参数的对话框 -->
    <el-dialog
      title="添加动态参数"
      :visible.sync="activeDialogVisible"
      width="50%"
    >
      <!-- 对话框的表单 -->
      <el-form
        :model="activeForm"
        :rules="activerules"
        ref="activeForm"
        label-width="100px"
        class="demo-ruleForm"
      >
        <el-form-item label="动态参数" prop="name">
          <el-input v-model="activeForm.name"></el-input>
        </el-form-item>
      </el-form>
      <!-- 对话框的底部 -->
      <span slot="footer" class="dialog-footer">
        <el-button @click="activeDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="activeDialogVisible = false"
          >确 定</el-button
        >
      </span>
    </el-dialog>

    <!-- 添加静态属性的对话框 -->
    <el-dialog
      title="添加静态属性"
      :visible.sync="staticDialogVisible"
      width="50%"
    >
      <!-- 对话框的表单 -->
      <el-form
        :model="staticForm"
        :rules="activerules"
        ref="staticForm"
        label-width="100px"
        class="demo-ruleForm"
      >
        <el-form-item label="静态属性" prop="name">
          <el-input v-model="staticForm.name"></el-input>
        </el-form-item>
      </el-form>
      <!-- 对话框的底部 -->
      <span slot="footer" class="dialog-footer">
        <el-button @click="staticDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="staticDialogVisible = false"
          >确 定</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      //商品分类列表
      cateList: [],
      //级联选择框的配置对象
      cateProps: {
        value: "cat_id",
        label: "cat_name",
        children: "children"
      },
      //级联选择框双向绑定数组
      selectedCateKeys: [],
      //Tabs标签区域选中的标签
      activeName: "many",
      //控制按钮是否可用
      setdisabled: true,
      //动态参数的数据
      manyTableData: [],
      //静态参数的数据
      someTableData: [],
      //控制添加动态参数对话框的显示/隐藏
      activeDialogVisible: false,
      //添加动态参数表单内容
      activeForm: {
        name: ""
      },
      //添加动态参数表单验证
      activerules: {
        name: [{ required: true, message: "请输入动态参数", trigger: "blur" }]
      },
      //添加静态属性对话框的显示/隐藏
      staticDialogVisible: false;
      //添加静态属性表单内容
      staticForm: {
        name: ""
      },
      //添加静态属性表单验证
      staticrules: {
        name: [{ required: true, message: "请输入静态属性", trigger: "blur" }]
      },
    };
  },
  created() {
    this.getCateList();
  },
  methods: {
    //获得选择商品分类的列表内容
    async getCateList() {
      const { data: res } = await this.$http.get("categories");
      if (res.meta.status !== 200) {
        return this.$message.error("获取分类列表失败");
      }
      this.cateList = res.data;
      console.log(this.cateList);
    },
    //级联选择框选中项变化,会触发这个函数
    handleChange() {
      this.getParamsData();
    },
    //标签页区域点击则触发
    handleClick() {
      //   console.log(this.activeName);
      this.getParamsData();
    },
    //证明参数的列表数据
    async getParamsData() {
      //不是三级标签则不反应
      if (this.selectedCateKeys.length !== 3) {
        this.selectedCateKeys = [];
        this.setdisabled = true;
        return;
      }
      //是三级标签,则下面的部分解除禁用
      this.setdisabled = false;
      //根据所选的Id和对应的面板,获取对应的参数
      const { data: res } = await this.$http.get(
        `categories/${this.cateId}/attributes`,
        {
          params: {
            sel: this.activeName
          }
        }
      );
      if (res.meta.status !== 200) {
        return this.$message.error("获取参数列表失败");
      }
      console.log(res.data);
      if (this.activeName === "many") {
        this.manyTableData = res.data;
      } else {
        this.someTableData = res.data;
      }
    },
    //点击打开添加动态参数对话框
    setActiveDialogVisible() {
      this.activeDialogVisible = true;
    }
  },
  computed: {
    //当前选中的三级分类的Id
    cateId() {
      if (this.selectedCateKeys.length === 3) {
        //最后一项就是选中的三级分类Id
        return this.selectedCateKeys[2];
      }
      return null;
    }
  }
};
</script>

<style lang="less">
.cat_opl {
  margin-top: 15px;
}
.cat_span {
  margin-right: 15px;
}
</style>
